<template>
  <div class="achievement-container-padding">
    <el-steps :active="currentStep" align-center finish-status="success">
      <el-step title="选择成果类型" />
      <el-step title="填写成果信息" />
      <el-step title="完成" />
    </el-steps>
    <div class="content">
      <el-form
        v-if="currentStep == 0"
        :model="formInline"
        class="form-inline"
        label-width="auto"
        :rules="rules"
        ref="form1"
      >
        <el-form-item label="人员名称：" style="padding: 0" prop="personnelId">
          <el-select
            v-model="formInline.personnelId"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in peopleList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="成果及荣誉类型：" prop="type">
          <el-radio-group v-model="formInline.type">
            <el-radio-button
              v-for="item in typeOptions"
              :label="item.label"
              :value="item.label"
              :key="item.id"
            />
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-form
        v-if="currentStep == 1"
        :model="twoForm"
        class="form-vertical"
        label-width="auto"
        ref="form2"
      >
        <el-form-item
          v-for="item in formList"
          :key="item.prop"
          :label="item.label"
          style="padding: 0"
          :prop="item.prop"
          :rules="item.rules"
        >
          <el-select
            v-if="item.type === 'select' && item.options"
            v-model="twoForm[item.prop]"
            :placeholder="`请选择${item.label}`"
            clearable
            style="width: 600px"
          >
            <el-option
              v-for="i in item.options"
              :key="i.value"
              :label="i.label"
              :value="i.value"
            />
          </el-select>
          <el-date-picker
            v-else-if="item.type === 'date'"
            v-model="twoForm[item.prop]"
            :placeholder="`请选择${item.label}`"
            :type="item.attr?.dateType ?? 'date'"
            :value-format="item.attr?.dateValueFormat ?? 'YYYY-MM-DD'"
            :format="item.attr?.dateValueFormat ?? 'YYYY-MM-DD'"
            style="width: 600px"
          />
          <el-input
            v-else
            v-model="twoForm[item.prop]"
            :placeholder="`请输入${item.label}`"
            clearable
            style="width: 600px"
          />
        </el-form-item>
      </el-form>
      <el-result v-if="currentStep == 3" icon="success" title="提交成功" />
    </div>
    <el-divider />
    <div class="footer">
      <el-button
        v-if="currentStep == 0"
        type="primary"
        class="button"
        @click="next"
      >
        下一步
      </el-button>
      <el-button
        v-if="currentStep == 1"
        type="primary"
        class="button"
        @click="handSubmit"
      >
        确认提交
      </el-button>
      <!-- <el-button
        v-if="currentStep == 1"
        type="primary"
        class="button"
        @click="next"
      >
        暂存
      </el-button> -->
      <el-button
        v-if="currentStep == 3"
        type="primary"
        class="button"
        @click="goDetails"
      >
        查看成果详情
      </el-button>
      <el-button v-if="currentStep == 3" class="button" @click="goList">
        返回成果列表
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted, computed } from 'vue'
  import { useRoute } from 'vue-router'
  import {
    getPersonnelNoPage,
    addAchievement,
    getAchievementInfo,
    updateAchievement,
  } from '@/api/postdoctor'
  import { useDictStore } from '@/store/modules/dict'
  import { useCloseTabNavigate } from '@/utils/useCloseTabNavigate'

  const route = useRoute()
  const id = ref()
  const { closeTabNavigate } = useCloseTabNavigate()
  const dictStore = useDictStore()
  const currentStep = ref(0)
  const formInline = ref({
    name: '', //成果名称
    personnelId: '',
    type: '', //成果类型
    achievementJson: '',
  })
  const form1 = ref()
  const form2 = ref()
  const rules = ref({
    personnelId: [
      {
        required: true,
        message: '请选择人员名称',
        trigger: 'change',
      },
    ],
    type: [
      {
        required: true,
        message: '请选择成果类型',
        trigger: 'change',
      },
    ],
  })

  const achievementJson = ref({})

  const peopleList = ref([])
  interface item {
    id: number
    label: string
  }
  const typeOptions = computed<item[]>(() =>
    dictStore.getDictType('achievement_type')
  )

  const getPeopleList = () => {
    let params = {
      pageNo: 1,
      pageSize: 100,
    }
    getPersonnelNoPage(params).then((res) => {
      let { data } = res
      peopleList.value = data
    })
  }

  const twoForm = ref({})

  let formList = ref<any>([
    {
      label: '专利名称：',
      prop: 'patentName',
      rules: [
        {
          required: true,
          message: '请输入专利名称',
          trigger: 'blur',
        },
      ],
    },
    {
      label: '专利号：',
      prop: 'patentNumber',
      rules: [
        {
          required: true,
          message: '请输入专利号',
          trigger: 'blur',
        },
      ],
    },
    {
      label: '专利类别：',
      prop: 'patentCategory',
      type: 'select',
      options: [
        {
          label: '发明专利',
          value: '0',
        },
        {
          label: '实用新型专利',
          value: '1',
        },
        {
          label: '外观专利',
          value: '2',
        },
      ],
      rules: [
        {
          required: true,
          message: '请选择专利类别',
          trigger: 'change',
        },
      ],
    },
    {
      label: '授权时间：',
      prop: 'authorizationTime',
      type: 'date',
      rules: [
        {
          required: true,
          message: '请选择授权时间',
          trigger: 'change',
        },
      ],
    },
  ])

  function checkType(type) {
    switch (type) {
      case '授权专利':
        return [
          {
            label: '专利名称：',
            prop: 'patentName',
            rules: [
              {
                required: true,
                message: '请输入专利名称',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '专利号：',
            prop: 'patentNumber',
            rules: [
              {
                required: true,
                message: '请输入专利号',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '专利类别：',
            prop: 'patentCategory',
            type: 'select',
            options: [
              {
                label: '发明专利',
                value: '0',
              },
              {
                label: '实用新型专利',
                value: '1',
              },
              {
                label: '外观专利',
                value: '2',
              },
            ],
            rules: [
              {
                required: true,
                message: '请选择专利类别',
                trigger: 'change',
              },
            ],
          },
          {
            label: '授权时间：',
            prop: 'authorizationTime',
            type: 'date',
            rules: [
              {
                required: true,
                message: '请选择授权时间',
                trigger: 'change',
              },
            ],
          },
        ]
      case '论文专著':
        return [
          {
            label: '论文题目：',
            prop: 'paperName',
            rules: [
              {
                required: true,
                message: '请输入论文题目',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '刊物名称：',
            prop: 'paperName',
            rules: [
              {
                required: true,
                message: '请输入刊物名称',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '国际/国内刊号（ISSN/CN）：',
            prop: 'internationalOrDomesticISSN',
            rules: [
              {
                required: true,
                message: '请输入国际/国内刊号（ISSN/CN）',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '发表时间：',
            prop: 'publicationTime',
            type: 'date',
            rules: [
              {
                required: true,
                message: '请选择发表时间',
                trigger: 'change',
              },
            ],
          },
        ]
      case '标准':
        return [
          {
            label: '标准名称：',
            prop: 'standardName',
            rules: [
              {
                required: true,
                message: '请输入标准名称',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '标准代号：',
            prop: 'standardCode',
            rules: [
              {
                required: true,
                message: '请输入标准代号',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '标准分类：',
            prop: 'standardCategory',
            rules: [
              {
                required: true,
                message: '请输入标准分类',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '发表时间：',
            prop: 'standardCategory',
            type: 'date',
            rules: [
              {
                required: true,
                message: '请选择发表时间',
                trigger: 'change',
              },
            ],
          },
        ]
      case '资助':
        return [
          {
            label: '项目名称',
            prop: 'projectName',
            rules: [
              {
                required: true,
                message: '请输入项目名称',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '项目批准号',
            prop: 'projectApprovalNumber',
            rules: [
              {
                required: true,
                message: '请输入项目批准号',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '项目类别',
            prop: 'projectCategory',
            rules: [
              {
                required: true,
                message: '请输入项目类别',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '经费（万元）',
            prop: 'fundingAmount',
            rules: [
              {
                required: true,
                message: '请输入经费',
                trigger: 'blur',
              },
              {
                type: 'number',
                message: '请输入数字',
              },
            ],
          },
          {
            label: '资助时间',
            prop: 'fundingTime',
            type: 'date',
            rules: [
              {
                required: true,
                message: '请选择资助时间',
                trigger: 'change',
              },
            ],
          },
        ]
      case '国际化培养':
        return [
          {
            label: '项目名称',
            prop: 'projectName',
            rules: [
              {
                required: true,
                message: '请输入项目名称',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '国外对接机构',
            prop: 'foreignPartnerInstitution',
            rules: [
              {
                required: true,
                message: '请输入国外对接机构',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '国外学习地',
            prop: 'foreignStudyLocation',
            rules: [
              {
                required: true,
                message: '请输入国外学习地',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '培养时间',
            prop: 'trainingTime',
            type: 'date',
            rules: [
              {
                required: true,
                message: '请选择培养时间',
                trigger: 'change',
              },
            ],
          },
        ]
      default:
        return []
    }
  }

  function checkForm(type) {
    switch (type) {
      case '授权专利':
        return {
          patentName: '',
          patentNumber: '',
          patentCategory: '',
          authorizationTime: '',
        }
      case '论文专著':
        return {
          paperName: '',
          journalTitle: '',
          internationalOrDomesticISSN: '',
          publicationTime: '',
        }
      case '标准':
        return {
          standardName: '',
          standardCode: '',
          standardCategory: '',
          publicationTime: '',
        }
      case '资助':
        return {
          projectName: '',
          projectApprovalNumber: '',
          projectCategory: '',
          fundingAmount: '',
          fundingTime: '',
        }
      case '国际化培养':
        return {
          projectName: '',
          foreignPartnerInstitution: '',
          foreignStudyLocation: '',
          trainingTime: '',
        }
    }
  }

  const next = () => {
    form1.value.validate(async (valid: boolean) => {
      if (valid) {
        if (currentStep.value++ > 2) currentStep.value = 0
        if (currentStep.value == 2) {
          currentStep.value = 3
        }
        formList.value = checkType(formInline.value.type)
      }
    })
  }

  const goList = () => {
    closeTabNavigate({ name: 'HonorsComponent' })
  }

  const goDetails = () => {
    closeTabNavigate({ name: 'HonorsDetails' })
  }

  const handSubmit = () => {
    form2.value.validate(async (valid: boolean) => {
      if (valid) {
        let params = {
          ...formInline.value,
        }
        params.name = formInline.value.type
        params.type = typeOptions.value
          .find((item) => item.label == formInline.value.type)
          ?.id.toString()
        // typeOptions.value.forEach((item) => {
        //   achievementJson.value[item.label] = checkForm(item.label)
        // })

        achievementJson.value[formInline.value.type] = twoForm.value
        params.achievementJson = JSON.stringify(achievementJson.value)
        console.log('提交', params)
        // addAchievement(params).then((res: any) => {
        //   let { code } = res
        //   if (code == 0) {
        //     currentStep.value = 3
        //   }
        // })
      }
    })
  }
  onMounted(() => {
    getPeopleList()
    id.value = route.query.id
    if (id.value) {
      getAchievementInfo(id.value).then((res) => {
        let { data } = res
        formInline.value.type = data.name
      })
    }
  })
</script>

<style scoped lang="scss">
  $margin: 20px;

  .content {
    margin-top: 40px;
    min-height: 50vh;
    display: flex;
    justify-content: center;
  }

  .form-inline {
    width: 600px;
  }

  .footer {
    display: flex;
    justify-content: center;

    .button {
      width: 240px;
    }
  }

  .form-vertical {
  }

  :deep(.el-form-item) {
    margin-bottom: $margin;
  }
</style>
